【Angular8】CHANGELOG.md自動生成「ngx-semantic-version」がとても便利だった

どうも！大阪オフィスの西村祐二です。

バグを修正したり、機能を追加したりなど日々開発してリリース作業をしていると「CHANGELOG.md」を自動生成、自動更新したり、セマンティックバージョニングでタグを生成する仕組みがほしくなってきました。

いろいろ調べていると「ngx-semantic-version」がコマンド一発で「CHANGELOG.md」の自動生成環境を作ってくれて便利だったので紹介したいと思います。

「ngx-semantic-version」とは

リリース作業時によくやるCHANGELOG.mdの更新や、Gitタグを付与する作業などを自動化する環境を構築してくれるライブラリです。

「ngx-semantic-version」を使うと下記のライブラリをいい感じにインストールして環境を作ってくれます。

• commitlint
  • Gitのコミットメッセージを規約に従ってるかチェックするLintツール
• husky
  • Gitフックを設定するためのツール。コミットする前などに特定の処理を追加できます。
• commitizen
  • 対話的にコミットメッセージを入力できるツール。これを使ってコミットメッセージを入力すると、Lintにそったコミットメッセージになります。
• standard-version
  • GitのコミットメッセージをもとにCHANGELOG.mdを自動生成、セマンティックバージョニングにそってGitタグを打ってくれます。

試してみる

早速試してします。

環境

Angular CLI: 8.3.14
Node: 12.8.0
OS: darwin x64
Angular: 8.2.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.14
@angular-devkit/build-angular     0.803.14
@angular-devkit/build-optimizer   0.803.14
@angular-devkit/build-webpack     0.803.14
@angular-devkit/core              8.3.14
@angular-devkit/schematics        8.3.14
@angular/cli                      8.3.14
@ngtools/webpack                  8.3.14
@schematics/angular               8.3.14
@schematics/update                0.803.14
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

インストール

はじめに適当なAngularのプロジェクトを作成します。今回は「ngx-semver-test」としています。

$ ng new ngx-semver-test --style scss --routing
$ cd ngx-semver-test

ngコマンドを使って「ngx-semantic-version」をインストールします。

$ ng add ngx-semantic-version

これでインストール終わりです。めっちゃ簡単ですね！

差分を確認してみます

インストール後、どう変化したか確認してみます。

変更のあったファイルはこの３つでした。

新しく、commitlint.config.jsが作成されていました。

/**
 * To check all configuration options, please visit
 * https://commitlint.js.org/#/reference-rules
 */
module.exports = {
  extends: ['@commitlint/config-conventional'],
};

package.jsonでは、ライブラリ追加以外に下記設定が追加されていました。

scriptコマンドが一つ追加されていました。

huskyとcommitizenの設定が追加されていました。

VSCodeのプラグイン「vscode-commitizen」を使う

VSCodeにはcommitizenのプラグインがあります。VSCode上で対話的にコミットメッセージを入力できます。

VSCodeを使ってる人はこちらのプラグインを入れておくと更に開発効率上がると思います。

使い方

• コマンドパネル（ctrl+shift+pまたはcommand+shift+p）を開き、「conventional commit」と入力します。
• コマンドを選択し、その後質問（タイプ、範囲、件名、本文、重大な変更、解決済みの問題）に回答します。

これで、commitlintにそった形でGitコミットできます。

コミットしてみる

ちなみに先頭大文字がデフォルトだめなので、下記のように設定しています。

module.exports = {
  extends: ['@commitlint/config-conventional'],
  "rules": {
    "subject-case": [0],
    "scope-case": [0]
  }
};

コマンドパネル（ctrl+shift+pまたはcommand+shift+p）を開き、「conventional commit」と入力します。

下記のように入力フォームが出てくるのでコメントしていきます。

デフォルトのルールはこちらを参照ください。

▼Select the type of change that you're committing

コミットのタイプを下記から選択しましょう。

• feat: 新機能
• fix: バグフィックス
• docs: ドキュメント
• style: コードスタイル
• refactor: リファクタリング
• perf: パフォーマンス
• build: ビルド
• ci: CI
• chore: 雑事（カテゴライズする必要ないようなもの）
• revert: コミット取り消し（git revert）
• test: テスト

▼Denote the SCOPE of this change (optional)

このコミットによる変更範囲を示します。（オプション）

変更したファイルやクラスなど書いておくと良さそうです。

▼Write a SHORT, IMPERATIVE tense description of the change

変更内容について、短く簡潔に説明を書きます。

▼Provide a LONGER description of the change (optional). Use "|" to break new line

変更内容の詳細な説明を書きます。 「|」で改行できます。

▼List any BREAKING CHANGES (optional)

重大な変更をリストします

▼List any ISSUES CLOSED by this change (optional)

この変更によってクローズされたIssueをリストします

対話形式じゃなくてもコミット可能

対話形式が面倒だってときは、形式にそった形であれば直接コミット可能です。

書き方的には下記のフォーマットになります。

chore(scope): short

longer

BREAKING CHANGE: breaking change
Closes #1

CHANGELOG.mdを自動生成してみる

下記コマンドを実行すると、CHANGELOG.mdを自動生成されます。

他にもpackage.json,package-lock.jsonのバージョン更新とGitタグをうってコミットしてくれます。

❯ npm run release

> ngx-semver-test@0.0.0 release /Users/yuji/study/angular/semver/ngx-semver-test
> standard-version

✔ bumping version in package.json from 0.0.0 to 0.1.0
✔ bumping version in package-lock.json from 0.0.0 to 0.1.0
✔ created CHANGELOG.md
✔ outputting changes to CHANGELOG.md
✔ committing package-lock.json and package.json and CHANGELOG.md
husky > commit-msg (node v12.8.0)

✔ tagging release v0.1.0
ℹ Run `git push --follow-tags origin master` to publish

• 最初のバージョンをリリース

プロジェクト、最初のバージョンをリリースする

$ npm run release -- --first-release

• 通常のリリース

$ npm run release

• プレリリースをリリースする

$ npm run release -- --prerelease

or

$ npm run release -- --prerelease alpha

このコマンドは裏ではstandard-versionのコマンドが動いているため詳細はこちらを参照ください。

さいごに

「ngx-semantic-version」を使って、リリース作業時によくやるCHANGELOG.mdの更新や、Gitタグを付与する作業などを自動化する環境を構築できました。

コマンド一発でこの環境を手にいれられるので大変便利ですね。

また、commitlintが導入されたことによって、わかりやすいコミットメッセージを書くことが、習慣づけされたり、色んな変更が混在したコミットを避けるようになり、レビューがしやすくなり効果もあると思います。

誰かの参考になれば幸いです。

宣伝